<template>
  <view class="guide">
    <view class="countdown">
      <!-- 使用 up-button 组件替换 u-button -->
      <up-button
        size="small"
        shape="circle"
        :text="`跳过${countdown}`"
        color="#AAAAAA"
        @click="jumpOut"
      ></up-button>
    </view>
    <image src="/static/img/guide.jpg" class="guide-img"></image>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      countdown: 5,
      timer: null as NodeJS.Timer | null
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.countdown--;
      if (this.countdown === 0) {
        this.jumpOut();
      }
    }, 1000);
  },
  methods: {
    jumpOut() {
      if (this.timer) {
        // @ts-ignore
        clearInterval(this.timer);
      }
      uni.redirectTo({
        url: '/pages/login/index',
        fail(err) {
          console.log(err);
        }
      });
    }
  }
});
</script>

<style lang="scss" scoped>
.guide {
  //弹性布局
  display: flex;
  //主轴方向 垂直
  flex-direction: column;
  //主轴（x）对齐
  justify-content: center;
  //交叉轴（x）对齐 单行使用
  align-items: center;
  // “vh” 是 CSS 中的一个相对单位，代表视口高度（Viewport Height）。
  // 其中，1vh 等于浏览器视口高度的 1% ，所以 “height: 100vh;” 是将元素的高度设置为视口高度的百分之百
  // ，即元素高度会填充整个浏览器可视区域的高度。
  height: 100vh;
}

.guide-img {
  width: 100%;
  height: 70%;
}

.countdown {
  margin-right:30px;
  align-self: flex-end;
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}
</style>
